<template>
    <div class="wrapper">
        <ul>
            <router-link to="/seller/dingdan" tag="li" active-class="on"><a href="">订单管理</a></router-link>
            <router-link to="/seller/shangpin" tag="li" active-class="on"><a href="">商品管理</a></router-link>
        </ul>
        <router-view></router-view>
    </div>
</template>

<script>
  export default {
    data() {
        return {
        };
    },
    methods: {
    }
  }
</script>

<style lang="scss" scoped>
    .wrapper{
        ul{
            list-style: none;
            display: flex;
            width: 100%;
            height: 50px;
            justify-content: center;
            background: #545c64;
            li{
                text-align: center;
                width: 20%;
                line-height: 50px;
                background: #545c64;
                transition: .5s;
                a{
                    transition: .5s;
                }
            }
            li:hover{               
                background: #434a50;
            }
            li:hover a{
                color: #fff;
            }
        }
    }
    .on{
        background: #434a50;
        a{
            color: #fff;
        }
    }
</style>